<template>
  <div>
    <qwerty title1="首页" title2="商品管理" title3="商品分类"></qwerty>
    
    <el-card style="margin-top:20px">
      <el-row :gutter="20">
          <el-col :span="4">
              <el-button type="primary" @click="showAddDialog">添加角色</el-button>
          </el-col>
      </el-row>
      
      <zk-table
      class="treeTable"
      ref="table"
      sum-text="sum"
      index-text="#"
      :data="catelist"
      :columns="columns"
      :stripe="props.stripe"
      :border="props.border"
      :show-header="props.showHeader"
      :show-summary="props.showSummary"
      :show-row-hover="props.showRowHover"
      :show-index="props.showIndex"
      :tree-type="props.treeType"
      :is-fold="props.isFold"
      :expand-type="props.expandType"
      :selection-type="props.selectionType">
      <template slot="isok" scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted===false" style="color:lightgreen"></i>
        <i class="el-icon-error" v-else style="color:red"></i>
      </template>
      <template slot="order" scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
        <el-tag size="mini" type="warning" v-else>三级</el-tag>
      </template>
      <template slot="opt" scope="scope">
        <el-button size="mini" icon="el-icon-edit" type="primary"  @click="toView(scope.row)">编辑</el-button>
        <el-button size="mini" icon="el-icon-delete" type="danger" @click="del(scope.row.cat_id)">删除</el-button>
      </template>  
    </zk-table>

    <el-pagination @size-change="handleSizeChange" style="text-align: center;" :page-sizes="[5, 10, 15]" @current-change="handleCurrentChange" :page-size="queryInfo.pagesize" :current-page="queryInfo.pagenum" layout="total,sizes, prev, pager, next,jumper" :total="total">
    </el-pagination>

    <el-dialog title="添加分类" :before-close="handleClose" :visible.sync="dialogVisible" width="40%">
        <el-form :rules="rules" ref="userForm" label-width="80px" :model="userForm">

            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="userForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
                <el-cascader
                clearable
                expand-trigger="hover"
                  v-model="selectedKeys"
                  :options="parentCateList"
                  :props="cascaderProps"
                  @change="handleChange"></el-cascader>
            </el-form-item>
            
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog title="添加分类" :before-close="handleClose" :visible.sync="dialogVisible2" width="40%">
        <el-form :rules="rules" ref="userForm" label-width="80px" :model="userForm">

            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="userForm.cat_name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="父级分类">
                <el-cascader
                clearable
                expand-trigger="hover"
                  v-model="selectedKeys"
                  :options="parentCateList"
                  :props="cascaderProps"
                  @change="handleChange"></el-cascader>
            </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="xgUser">确 定</el-button>
        </span>
    </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {getDeleteCategories,getxgUser} from '@/api/cates.js'

export default {
created(){
       this.getCategories();
    },
    methods:{
       //修改
        toView(data){
            console.log(data);
            this.userForm.cat_name = data.cat_name;
            this.userForm.id = data.cat_id;
            this.dialogVisible2 = true;
        },
        async xgUser(){
            var {data:res}=await getxgUser(`categories/${this.userForm.id}`,this.userForm);
            console.log(res);
            if(res.meta.status !==200){
                return this.$message.error("修改失败！")
            }
            this.$message.success("修改成功");
            this.getCategories();
            this.handleClose();
        },
      async getParentCateList(){
        const {data:res} =await this.request.get('categories',{params:{type:2}});
        // console.log(res);
        if(res.meta.status !==200){
            return this.$message.error("获取失败！")
        }
        this.parentCateList=res.data
      },
      handleChange(){
        if(this.selectedKeys.length>0){
          this.userForm.cat_pid=this.selectedKeys[
            this.selectedKeys.length-1
          ]
          this.userForm.cat_level=this.selectedKeys.length
        }else{
          this.userForm.cat_pid=0;
          this.userForm.cat_level=0;

        }
          // this.userForm.cat_pid=this.value[this.value.length-1]
      },
      addUser(){
        this.$refs.userForm.validate(async valid=>{
          if(!valid) return
          const {data:res} =await this.request.post('categories',this.userForm);
          console.log(res);
          if(res.meta.status !==201){
              return this.$message.error("添加失败！")
          }
          this.getCategories();
          this.handleClose();
        })
      },
      showAddDialog(){ 
        this.dialogVisible = true;
        this.getParentCateList();
      },
        //删除
        async del(row){
            var {data:res}=await getDeleteCategories(`categories/${row}`);
            // const {data:res} =await this.request.delete('categories',{row.id});
            console.log(res);
            if(res.meta.status !==200){
                return this.$message.error("删除失败！")
            }
            this.$message.success("删除成功");
            this.getCategories();
        },
        async getCategories(){
             var {data:res}=await this.request.get("categories",{params:this.queryInfo});
            // console.log(res);
            if(res.meta.status !==200){
                return this.$message.error("获取用户列表失败！")
            }
            this.catelist=res.data.result;
            this.total=res.data.total;
        },
        handleSizeChange(size) {
            this.queryInfo.pagesize = size;
            this.getCategories();
        },
        handleCurrentChange(num) {
            this.queryInfo.pagenum = num;
            this.getCategories();
        },handleClose() {
            // this.$refs['rulesForm'].resetFields();
            this.userForm.cat_name = '';
            // this.userForm.username = '';
            this.dialogVisible = false;
            this.dialogVisible2 = false;
        },
    },
    data(){
        return {
          cascaderProps:{
            value:"cat_id",
            label:'cat_name',
            children:'children',
            checkStrictly:true
          },
          selectedKeys:[],
          parentCateList:[],
          catelist:[],
          searchInput:'',
          tableData:[],
          queryInfo:{
              pagesize:10,
              pagenum:1,
              type:3
          },
          userForm:{
            cat_name:'',
            cat_pid:0,
            cat_level:0
          },
          total: 0, //总记录数
          dialogVisible2:false,
          dialogVisible: false, 
          props: {
            stripe: false,
            border: false,
            showHeader: true,
            showSummary: false,
            showRowHover: true,
            showIndex: false,
            treeType: true,
            isFold: true,
            expandType: false,
            selectionType: false,
          },
          rules: {
            username: [{
                required: true,
                message: '请输入分类名称',
                trigger: 'blur'
            }]
          },
        columns: [
          {
            label: '分类名称',
            prop: 'cat_name',
          }
          ,
          {
            label: '是否有效',
            type: "template",
            template:'isok'
          },
          {
            label: '排序',
            type: "template",
            template:'order'
          },
          {
            label: '操作',
            type: 'template',
            template: 'opt',
          },
        ],
        }
    }
}
</script>

<style>
.treeTable{
  margin-top: 15px;
}
.el-cascader{
  width: 100%;
}
</style>